<template>
	<view class="balance">
		<navbar />
		<view class="balance-top-container">
			<view class="balance-number">
				<text style="font-size: 60rpx;">￥</text>{{commissionBalance}}
			</view>
			<view class="balance-label">
				我的收益（元）
			</view>
			<view class="tabs-container">
				<button class="withdrawal-btn" @click="$u.route(`/pages/withdrawal/withdrawal?type=2`)">立即提现</button>
			</view>
		</view>
		<view class="balance-list-container" v-if="list.length">
			<view class="title">
				佣金明细
			</view>
			<scroll-view scroll-y style="max-height: 700rpx;" @scrolltolower="scrolltolower">
				<u-collapse :arrow="false">
					<u-collapse-item :title="item.remark" v-for="(item, index) in list" :key="index"
						@change="change($event,item)">
						<view class="item-title" slot="title">
							<view class="icon-wrapper">
								<u-icon name="arrow-down-fill" class="arrow-icon" :class="{'active':item.active}"
									size="20">
								</u-icon>
							</view>
							<view class="title-main">
								<view class="title-top">
									<view class="top-title">
										{{item.remark}}
									</view>
									<view class="top-amount"
										:class="Number(item.amount_change)>0?'increase':'decrease'">
										{{item.amount_change}}
									</view>
								</view>
								<view class="created-time">
									创建时间:{{item.created_at}}
								</view>
							</view>
						</view>
						<view class="item-content" slot="content">
							<view class="content-item">
								工单编号: {{item.detail.task_code}}
							</view>
							<view class="content-item">
								冻结余额: {{item.detail.freeze_balance}}
							</view>
							<view class="content-item">
								佣金余额: {{item.detail.commission_balance}}
							</view>
							<view class="content-item">
								账户余额: {{item.detail.balance}}
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
				<u-loadmore :status="status" />
			</scroll-view>
			<!-- 			<view class="bottom" @click="$u.route('/pages/balance_detail/balanceDetail')">
				查看所有明细 <u-icon name="arrow-right" size="24"></u-icon>
			</view> -->
		</view>
	</view>
</template>

<script>
	import navbar from "./components/navbar/navbar.vue";
	import cellItem from "@/components/cell-item/cellItem.vue";
	export default {
		components: {
			navbar,
			cellItem,
		},
		data() {
			return {
				commissionBalance: '',
				list: [],
				pageNum: 1,
				pageSize: 6,
				status:'loadmore',
			}
		},
		async onLoad() {
			await this.$loginStatus;
			this.getAmount();
			this.getList();
		},
		methods: {
			async getList() {
				if(this.status == 'nomore'){
					return
				}
				this.status = 'loading';
				const {
					data
				} = await this.$u.post(this.$restUrl.commissionDetailList, {
					page: this.pageNum,
					page_num: this.pageSize,
				});
				this.list.push(...data.data);
				if(this.list.length>= data.total){
					this.status = 'nomore';
				}else{
					this.pageNum++;
					this.status = 'loadmore';
				}
				console.log('this.list', this.list);
			},
			scrolltolower() {
				this.getList();
			},
			async getAmount() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getAmount);
				this.commissionBalance = data.commission_balance;
			},
			async change(e, item) {
				for (let i of this.list) {
					this.$set(i, 'active', false);
				}
				this.$set(item, 'active', e.show);
				if (e.show && !item.detail) {
					const {
						data
					} = await this.$u.post(this.$restUrl.getWalletItemDetail, {
						flow_id: item.id
					})
					this.$set(item, 'detail', data);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./commission.scss";
</style>
